<!--
 * @Author: fisher
 * @Date: 2022-12-16 22:45:48
 * @LastEditTime: 2023-02-01 16:15:11
 * @LastEditors: your name
 * @Description: 
 * @FilePath: /vite-vue-ts-pc/src/pages/home/home.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<style lang="scss" scoped>
.home {
  font-size: 14px;
  width: 100%;
  background-color: var(--primary);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--white);
  height: 100px;
}
.loading-wrap {
  width: 64px;
}
.list {
  padding: 10px;
  li {
    margin-bottom: 10px;
    text-align: center;
  }
}
</style>
<template>
  <div class="home">
    <div class="loading-wrap">
      <m-loading :show="true" stroke="#fff"></m-loading>
    </div>
    <div>{{ msg }}</div>
  </div>
  <n-data-table
    :bordered="false"
    :columns="columns"
    :data="data"
    :single-line="false"
    :loading="loading"
  ></n-data-table>
  <ul class="list">
    <li>count:{{ count }}</li>
    <li>
      <m-button type="primary" @click.stop="addCount(10)">加 count 10</m-button>
    </li>
    <li>
      <m-button type="primary" @click.stop="setCount">加 count 20</m-button>
    </li>
    <li>
      {{ countAdd100 }}
    </li>
    <li>
      <m-button type="primary">{{ t('睿睿') }}</m-button>
    </li>
    <li>
      <m-button type="primary" @click.stop="changeLan">{{
        t('切换语言')
      }}</m-button>
    </li>
    <li>
      <m-button type="primary" @click.stop="postReq"> 发post请求</m-button>
    </li>
    <li>
      <m-button type="primary" @click.stop="getReq"> 发get请求</m-button>
    </li>
  </ul>
</template>

<script setup lang="ts">
import apis from '../../api/home'
import { useHomeStore, storeToRefs } from '@/store'
import type { DataTableColumns } from 'naive-ui'

type RowData = {
  name: string
  age: number
  sex: string
  job: string
}
const { t, locale } = useI18n()
const msg = ref()
const loading = ref(false)
const homeStore = useHomeStore()
// store 和计算属性必须用storeToRefs才能响应式
const { count, countAdd100 } = storeToRefs(homeStore)
const { addCount } = homeStore
msg.value = t('谁来了', { who: t('睿睿') })
const columns: DataTableColumns = [
  {
    title: '姓名',
    key: 'name'
  },
  {
    title: '年龄',
    key: 'age'
  },
  {
    title: '性名',
    key: 'sex'
  },
  {
    title: '职业',
    key: 'job'
  }
]
const data = ref<RowData[]>([])
function changeLan() {
  console.log(locale.value)
  locale.value = locale.value === 'zh' ? 'en' : 'zh'
  msg.value = t('谁来了', { who: t('睿睿') })
}
function setCount() {
  // homeStore.count += 20
  homeStore.$patch((store) => {
    store.count += 20
  })
}
function getReq() {
  apis
    .testGet({ params: { get: 1 } })
    .loading((status: boolean) => {
      loading.value = status
    })
    .anyway(() => {
      data.value = new Array(20).fill(15).map((item, index) => ({
        name: 'Georgia Porter',
        age: 15 + index,
        sex: 'male',
        job: 'student'
      }))
      console.log('anyway:')
    })
}
function postReq() {
  apis.testPost({ data: { post: 2 } })
}
</script>
